<template>
  <div>
    <div class="confirmInfo_title">填写申办资料</div>
    <div class="confirmInfo_list_wrap">
      <el-form ref="formCreateLeague" :model="vo" label-width="80px" size="small" style="width:644px" :rules="rules">
        <el-form-item label="比赛时间" prop="date">
          <el-date-picker
            v-model="vo.date"
            style="width:100%"
            type="daterange"
            range-separator="至"
            start-placeholder="比赛开始日期"
            end-placeholder="比赛结束日期"
            value-format="yyyy-MM-dd"
            :default-value="new Date(gameInfo.startTime)"
            :picker-options="pickerOptions"
            @change="onChangeGameDate"
          />
        </el-form-item>
        <el-form-item label="分站名称" prop="name">
          <el-input v-model="vo.name" placeholder="请填写分站赛名称">
            <template slot="prepend">
              <span :title="gameInfo.name" class="prepend_ellipsis gl_ellipsis">{{ gameInfo.name }}</span>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="认证等级" prop="competitionCertificationLevelId">
          <el-select v-model="vo.competitionCertificationLevelId" style="width:100%" placeholder="请选择赛事认证等级">
            <el-option v-for="item in levelList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="比赛地址" prop="address">
          <el-input v-model="vo.address" placeholder="请填写比赛地址" />
        </el-form-item>
        <el-form-item label="负责人" prop="responsiblePersonName">
          <el-input v-model="vo.responsiblePersonName" placeholder="请填写负责人姓名" />
        </el-form-item>
        <el-form-item label="联系电话" prop="responsiblePersonPhone">
          <el-input v-model="vo.responsiblePersonPhone" placeholder="请填写负责人手机号码" />
        </el-form-item>
      </el-form>
    </div>
    <el-row>
      <el-col :span="24" align="right">
        <el-button type="default" :loading="nextLoading" @click="clickPrevStep()">上一步</el-button>
        <el-button type="primary" :loading="nextLoading" @click="submitForm()">提交审核</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { CreateLeagueInput_Rules } from '@/lib/validate/league';

import {
  api_GET_EventsManagementCompetitionRequestCompetitionCertificationLevelListLeagueCompetitionId, // 获取分站赛的认证等级列表
  api_POST_EventsManagementCompetitionRequestCompetitionRequest // 提交举办分站赛申请（C端）
} from '@/extend/api/gameswaggerApi/app.js';

import {
  SiSTKWEventsManagementCompetitionRequestInput // 提交举办分站赛申请（C端）
} from '@/lib/form/game/swaggerForm';

export default {
  props: {
    requiredIdData: {
      type: Object,
      default () {
        return {};
      }
    },
    gameInfo: {
      type: Object,
      default () {
        return {};
      }
    },
    // 当前用户团体信息
    userTeamInfo: {
      type: Object,
      default () {
        return {};
      }
    },
    // 字典信息
    dict: {
      type: Object,
      default () {
        return {};
      }
    },
    // 字典信息
    district: {
      type: Array,
      default () {
        return [];
      }
    }
  },
  data () {
    const _this = this;
    return {
      vo: new SiSTKWEventsManagementCompetitionRequestInput(),
      formGameDate: [], // 存放组件时间
      rules: new CreateLeagueInput_Rules(),
      pickerOptions: { // 时间组件禁用日期处理
        disabledDate(time) {
          const startDate = _this.gameInfo.startTime.slice(0, 10);
          const endDate = _this.gameInfo.endTime.slice(0, 10);
          const sDateArr = startDate.split('-');
          const eDateArr = endDate.split('-');
          const sDate = new Date(sDateArr[0], sDateArr[1], sDateArr[2]).getTime();
          const eDate = new Date(eDateArr[0], eDateArr[1], eDateArr[2]).getTime();
          const y = time.getFullYear();
          const m = time.getMonth() + 1;
          const d = time.getDate();
          const _time = new Date(y, m, d).getTime();
          return _time < sDate || _time > eDate;
        }
      },
      nextLoading: false, // 下一步操作按钮Loading
      levelList: [], // 认证等级列表
      forTransferVO: {} // 传递用于静态显示的VO
    };
  },
  created() {
    this.getLevelDictList();
  },
  methods: {
    // 获取认证等级字典
    getLevelDictList() {
      api_GET_EventsManagementCompetitionRequestCompetitionCertificationLevelListLeagueCompetitionId(this.gameInfo.id)
        .then(
          res => {
            this.levelList = res;
          }
        )
        .catch(
          error => {
            this.$message({
              message: `认证等级获取失败 ${error.error.message}`,
              type: 'error',
              showClose: true
            });
          }
        );
    },
    // 提交审核
    submitForm () {
      this.$refs.formCreateLeague.validate((valid) => {
        if (valid) {
          this.vo.leagueCompetitionId = this.gameInfo.id;
          this.vo.delegationId = this.requiredIdData.delegationId;
          this.forTransferVO = this.formatTransferVO(this.vo);
          this.submitCompetitionRequest(this.vo);
        }
      });
    },
    formatTransferVO(data) {
      const _data = JSON.parse(JSON.stringify(data));
      _data.competitionCertificationLevel = this.levelList.find(item => item.id === _data.competitionCertificationLevelId);
      return _data;
    },
    // 提交申办资料
    submitCompetitionRequest(vo) {
      this.nextLoading = true;
      api_POST_EventsManagementCompetitionRequestCompetitionRequest(vo)
        .then(
          res => {
            this.nextLoading = false;
            this.$emit('onCompetitionRequestSuccess', this.forTransferVO);
            this.clickNextStep();
            this.$message({
              message: `分站赛申请成功`,
              type: 'success',
              showClose: true
            });
          }
        )
        .catch(
          error => {
            this.nextLoading = false;
            this.$message({
              message: `分站赛申请失败 ${error.error.message}`,
              type: 'error',
              showClose: true
            });
          }
        );
    },
    onChangeGameDate (date) {
      this.vo.startTime = date && date[0];
      this.vo.endTime = date && date[1];
    },
    // 点击执行下一步操作
    clickNextStep () {
      this.$emit('onNextStep');
    },
    // 点击执行上一步操作
    clickPrevStep () {
      this.$emit('onPrevStep');
    }
  }
};
</script>

<style lang="scss" scoped>
  .confirmInfo_list_wrap {
    min-height: 444px;
    margin-bottom: 20px;
  }

  .prepend_ellipsis {
    display: inline-block;
    max-width: 240px;
  }
</style>
